import {StyleSheet} from 'react-native';
import {getRealSize} from '../../utils';
import Color from '../../styles/color';
import ThemeStyles from '../../styles';

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapBox: {flex: 1},
  title: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: getRealSize(16),
    marginVertical: getRealSize(6),
  },
  filterAction: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  search: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: getRealSize(16),
    marginTop: getRealSize(16),
  },
  productCardContainer: {
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    borderBottomWidth: 1,
    borderBottomColor: Color.line.color,
  },
  productCardBox: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F7F7F7',
    width: getRealSize(86),
    height: getRealSize(42),
    // padding: getRealSize(8),
    marginLeft: getRealSize(8),
    marginBottom: getRealSize(8),
  },
  productCardLabel: {
    fontSize: getRealSize(10),
    color: '#757575',
    textAlign: 'center',
  },
  productCardBoxSelected: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#D7EAFF',
    // padding: getRealSize(8),
    width: getRealSize(86),
    height: getRealSize(42),
    marginLeft: getRealSize(8),
    marginBottom: getRealSize(8),
  },
  productCardLabelSelected: {
    fontSize: getRealSize(10),
    color: '#317AFF',
    textAlign: 'center',
  },
  supplierCardContainer: {
    backgroundColor: '#F7F7F7',
    marginHorizontal: getRealSize(15),
    marginTop: getRealSize(15),
    paddingHorizontal: getRealSize(15),
    paddingVertical: getRealSize(20),
    flexDirection: 'row',
    alignItems: 'center',
  },
  supplierCardContent: {
    flex: 1,
  },
  supplierCardImage: {
    marginLeft: getRealSize(25),
  },
  supplierCardTitle: {
    fontSize: getRealSize(16),
    fontWeight: 'bold',
    color: '#333333',
  },
  supplierCardExtra: {
    flexDirection: 'row',
  },
  supplierCardDesc: {
    fontSize: getRealSize(12),
    color: '#757575',
  },
  sheetContainer: {
    borderTopColor: ThemeStyles.Color.line.color,
    borderTopWidth: StyleSheet.hairlineWidth,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 12,
    },
    shadowOpacity: 0.58,
    shadowRadius: 16.0,

    elevation: 24,
  },
  contentContainer: {
    backgroundColor: 'white',
  },
  backBtn: {
    position: 'absolute',
    top: getRealSize(108),
    left: getRealSize(15),
    width: getRealSize(72),
    backgroundColor: 'rgba(248,248,248, 0.6)',
    paddingHorizontal: getRealSize(8),
    paddingVertical: getRealSize(8),
    borderRadius: getRealSize(4),
    flexDirection: 'row',
    alignItems: 'center',
  },
  backBtnLab: {
    color: '#666',
    paddingVertical: getRealSize(6),
    width: getRealSize(48),
    fontWeight: 'bold',
  },
});

export default Styles;
